<template>
    <div class="menuManage zy-content ">
      <Card title="" class="detail-content-layout">
        <Tree :data="roleTreeData" ref="tree" :render="renderContent"></Tree>
      </Card>


        <add-model ref="addModel" @save="save"></add-model>

        <delete-model ref="deleteModel" @save="save"></delete-model>
    </div>
</template>

<script>
import {getRoleTree} from "@/api/system/organization";
import AddModel from './components/addModel.vue'
import DeleteModel from './components/deleteModel.vue'
export default {
    name: "organization",
    components: {
        AddModel,
        DeleteModel
    },
    data() {
        return {
          expandIds:[],
            roleTreeData: [
                {
                    title: '组织架构',
                    expand: true,
                    render: (h, { data }) => {
                        return h('span', {
                            style: {
                                display: 'inline-block',
                                width: '100%',
                                fontSize: '18px'
                            }
                        }, [

                            h('span', [
                                h('span', data.title)
                            ]),
                            h('span', [
                                h('Button', {
                                    props: Object.assign({}, this.buttonProps, {
                                        icon: 'ios-add'
                                    }),
                                    style: {
                                        marginLeft: '8px',
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.addClick(data, 'add')
                                        }
                                    }
                                }),
                            ])
                        ]);
                    },
                    children: []
                }
            ],
            buttonProps: {
                type: 'default',
                size: 'small',
            }
        }
    },
    mounted() {
        this.getRoleTree()
    },
    methods: {
      getExpandId(){
        const nodes = this.$refs.tree.$data.flatState;
        let ids = [];
        for (let i=0;i<nodes.length;i++){
          if (nodes[i].node.expand && nodes[i].node.id){
            ids.push(nodes[i].node.id)
          }
        }
        this.expandIds = ids
      },
      setExpand(arr){
        for (let i=0;i<arr.length;i++){
          if(this.expandIds.includes(arr[i].id)){
            arr[i].expand = true
          }
          if (arr[i].children){
            this.setExpand(arr[i].children)
          }
        }
      },
        getRoleTree() {
        this.getExpandId()
            getRoleTree().then(res => {
                if (res.code === 200) {
                  let data = res.data
                  this.setExpand(data)
                    this.roleTreeData[0].children = res.data;
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            });
        },
        renderContent(h, { data }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%',
                    fontSize:'15px'
                }
            }, [
                h('span', [
                    h('span', data.roleName)
                ]),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px'
                    }
                }, [
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-add'
                        }),
                        style: {
                            marginLeft: '8px',
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {
                                this.addClick(data, 'add')
                            }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-remove'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {
                                this.removeClick(data)
                            }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-create-outline'
                        }),
                        on: {
                            click: () => {
                                this.addClick(data, 'edit')
                            }
                        }
                    })

                ])
            ]);
        },
        addClick(data, submitTo) {
            this.$refs.addModel.open(data, submitTo);
        },
        save (){
            this.getRoleTree();
        },
        removeClick( data) {
            this.$refs.deleteModel.open(data);
        }
    }
}
</script>

<style scoped lang="scss">
.menuManage {
    font-size: 15px;


}
</style>

<style lang="scss">
.menuManage .ivu-btn{
  //color: #00142D;
  //border-color: #00142D;
  i{
    font-weight: bold;
    //color: #00142D;
  }
  &:hover{
    i{
      //color: #035beb !important;
      color: #FFFFFF !important;
    }
    border-color: #035beb;
    background: #035beb;
  }
}
</style>
